<template>
  <view class="content">
    <chart-title title="支付方式" no-more />

    <view class="flex-row align-center">
      <view class="charts-box-ring">
        <qiun-data-charts
          class="charts-box-ring"
          type="ring"
          :opts="options"
          :chart-data="charData"
          :canvas2d="true"
          canvas-id="tBaBaPayTypeCharts"
        />
      </view>
      <view class="flex-item margin-left-15">
        <view v-for="(item,index) in labels" :key="index" class="label margin-bottom-10">
          <view class="flex-row align-center">
            <view class="label-block" :style="{background:item.color}" />
            <text class="text-20 color-t1 text-bold margin-left-10">{{ item.label }}</text>
          </view>
          <view class="padding-left-30 margin-top-16">
            <text class="text-32 color-t1 text-bold">{{ item.value }}元</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ChartTitle from '../chart-title/chart-title'
import colors from '@/common/colors'
import options from './index'
export default {
  name: 'PayTypeModel',
  components: {
    ChartTitle
  },
  props: {
    orderPayWay: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      labels: [
        { label: '预付', value: '', color: colors.colorSuccess },
        { label: '挂账', value: '', color: '#0078FF' }
      ],
      charData: {},
      options
    }
  },
  watch: {
    orderPayWay(e) {
      this.labels[0].value = e.prepayOrderAmount
      this.labels[1].value = e.creditOrderAmount
      this.charData = {
        series: [
          {
            data: [
              {
                name: '预付',
                value: e.prepayOrderAmount,
                count: e.prepayOrderCount
              },
              {
                name: '挂账',
                value: e.creditOrderAmount,
                count: e.creditOrderCount
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../index";
</style>
